import React, { Component, Fragment } from 'react';
import { NavLink } from "react-router-dom"

import '../../styles/home/header.css'
import home_1 from '../../assets/home_x/home-1.png'
import home_2 from '../../assets//home_x/home-2.png'
class Header_x extends Component {
  constructor() {
    super()
    this.scrollHandler = this.scrollHandler.bind(this)
    this.state = {
      positions: 'absolute',
      num: '1rem'
    }
  }
  scrollHandler() {
    // let div1=document.querySelector('.search_x')
    // console.log(div1.offsetTop-document.documentElement.scrollTop)
    // let clien_h=div1.offsetTop-document.documentElement.scrollTop
    let top1 = document.querySelector('.top')
    if (top1) {
      let top_h = top1.offsetTop - document.documentElement.scrollTop
      this.setState({
        positions: 'fixed',
        num: '0'
      })
      
      if (top_h === 0) {
        this.setState({
          positions: 'absolute',
          num: '1rem',
          dress_x: ''
        })
      }
    }

  }
  componentDidMount(props) {
    window.addEventListener('scroll', this.scrollHandler);
    this.setState({
      dress_x:this.props.d_info
    })
    localStorage.setItem('dress_x', this.props.d_info)
    // console.log(localStorage.getItem('dress_x'))
  }
  tosearch() {
    // console.log(this.props)
    // this.props.history.push("/search_x",{name:"韩梅梅"})
  }
  render(props) {
    return (
      <Fragment>
        <header>
          <div className='top'>
            <div>
              <NavLink to='/dress'>
                <img src={home_1} className="dress_x" alt="图片不见了" />
                <span className='dre_local'>{localStorage.getItem('dress_x')}</span>
                <img src={home_2} className="down_x" alt="图片不见了" />
              </NavLink>
            </div>
            <div>
              <span>注册</span>|
                 <span>登录</span>
            </div>
          </div>
          <div className="search_x" style={{ position: this.state.positions, top: this.state.num }}>
            <NavLink to='/search_x' >
              <i className="iconfont icon-sousuo"></i>
              <span>搜索饿了么商家、商品名称</span>
            </NavLink>
          </div>
        </header>
      </Fragment>
    );
  }
}
export default Header_x